<template>
	<view class="withdraw">
		<view class="step1" v-if="step == '1'">
			<view class="step1-title">
				在开始注销前，请确认以下内容
			</view>
			<view class="step1-content">
				1.账号注销是您本人操作为保障您的权益，防止他人恶意操作，请配合我们进行简单的身份验证.</br>
				2.账号一旦被注销将不可恢复,注销后，您无法在本软件上再进行登录、使用该账号。</br>
				3.您已满足所有注销条件,具体条件请见下方
			</view>
			<view class="zxxz" @click="toZxxz">
				《注销须知》
			</view>
			<view class="yyd">
				<u-checkbox label="我已阅读并同意《注销须知》" name="1" > </u-checkbox>
			</view>
			<view class="">
				<u-button type="primary" @click="step = '2'" class="opt-btn confirm" text="确定"></u-button>
			</view>
		</view>
		<view class="step2" v-else>
			<view class="step2-title">
				注销后账号无法恢复，是否继续注销?
			</view>
			<view class="step2-subtitle">
				注销后您无法在本软件上再进行登录、使用该账号。请知晓!
			</view>
			<view class="step2-content">
				<view class="">
					应用信息
				</view>
				<view class="">
					名称：智慧华创
				</view>
				<view class="">
					版本：v1.o1
				</view>
				
				<u--form labelPosition="top" labelWidth="auto" :model="withdrawForm" :rules="rules" ref="uForm">
					<u-form-item label="用户名" prop="phone" >
						<u--input v-model="withdrawForm.phone"  placeholder="输入用户名"></u--input>
					</u-form-item>
					<u-form-item label="密码"  prop="password" >
						<u--input v-model="withdrawForm.password"  placeholder="输入密码" clearable :password="!eyeOpen">
							<template slot="suffix">
								<view class="" @click="eyeOpen = !eyeOpen" style="height: 24px;">
									<img src="@/static/img/icon-eye-open.png" v-if="eyeOpen" alt="" style="width: 24px;height: 24px;margin:0;" />
									<img src="@/static/img/icon-eye-close.png" v-else alt="" style="width: 24px;height: 24px;margin:0;" />		
								</view>
							</template>
						</u--input>
					</u-form-item>
					<u-form-item label="注销原因" prop="reason" >
						<u--textarea v-model="withdrawForm.reason"  placeholder="输入注销原因"></u--textarea>
					</u-form-item>
				</u--form>
				
				<view class="">
					<u-button type="primary"  class="opt-btn confirm" text="确定注销"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step:'1',
				withdrawForm:{
					phone: '19912345678', //手机号码
					password: 'a12345678', //密码
					reason:''
				},
				rules: {
					'phone': [
						{
							type: 'string',
							required: true,
							message: '输入正确的手机号格式',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '输入正确的手机号格式',
							trigger: ['change','blur'],
						}
					],
					'password': [
						{
							type: 'string',
							required: true,
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						},
						{
							min: 8,
							max: 20,
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						},
						{
							validator: (rule, value, callback) => {
								return  /[a-zA-Z]/.test(value) && /[0-9]/.test(value);
							},
							message: '输入8-20位密码，数字和字母组合',
							trigger: ['blur', 'change'],
						}
					],
				},
			}
		},
		methods: {
			toZxxz(){
				uni.navigateTo({
					url:'/pages/mine/cancellationNotice/cancellationNotice'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.withdraw {
		padding: 32rpx;
		font-family: zktqkt, zktqkt;
	}
	.step1 {
		.step1-title {
			font-weight: 400;
			font-size: 32rpx;
			color: #0E1E35;
			line-height: 68rpx;
			text-align: center;
		}
		.step1-content {
			margin-top: 28rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 68rpx;
		}
		.zxxz {
			font-weight: 400;
			font-size: 32rpx;
			color: #3D7CFD;
			line-height: 68rpx;;
		}
		.yyd {
			margin-top: 80rpx;
			font-size: 24rpx;
			color: #999999;
			line-height: 68rpx;
		}

	}
	
	.step2 {
		.step2-title {
			font-weight: 400;
			font-size: 32rpx;
			color: #0E1E35;
			line-height: 68rpx;
			text-align: center;
		}
		.step2-content {
			margin-top: 28rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			line-height: 68rpx;
		}
		.opt-btn {
			margin-top: 106rpx;
		}
	}

	.opt-btn {
		flex: 1;
		height: 72rpx;
		border-radius: 36rpx;
		font-size: 32rpx;
		border: none;
		margin-top: 280rpx;
	}
	
	.confirm {
		background: linear-gradient( 270deg, #1B5FF3 0%, #55B1F4 100%), #397FF8;
	}
	
	::v-deep .u-input, .u-textarea {
		background-color: #F3F5F8;
		border: none;
	}
</style>
